import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzSwitchModule } from 'ng-zorro-antd/switch';

@Component({
  selector: 'app-switch-text',
  standalone: true,
  imports: [NzSwitchModule, FormsModule, NzIconModule],
  template: `
    <p class="demo demo-space">
      <nz-switch
        [(ngModel)]="value"
        nzCheckedChildren="是"
        nzUnCheckedChildren="否"
      ></nz-switch>

      <nz-switch
        [(ngModel)]="value"
        nzCheckedChildren="1"
        nzUnCheckedChildren="0"
      ></nz-switch>

      <nz-switch
        [(ngModel)]="value"
        [nzCheckedChildren]="yes"
        [nzUnCheckedChildren]="no"
      ></nz-switch>
      <ng-template #yes>
        <span nz-icon nzType="check"></span>
      </ng-template>
      <ng-template #no>
        <span nz-icon nzType="close"></span>
      </ng-template>
    </p>
  `,
})
export class SwitchTextComponent {
  value = false;
}
